<template>
	<view class="loginpwdBox">
		<view class="loginpwdBox-box">
			<view class="loginpwdBox-box-bar">
				<text>{{originalPwd}}</text>
				<u-input placeholder="请输入原密码" type="password" :password-icon="passwordIcon" class="loginpwdBox-box-bar-uinput"></u-input>
			</view>
			<view class="splitline"></view>
			<view class="loginpwdBox-box-bar">
				<text>{{newPwd}}</text>
				<u-input placeholder="请输入新密码" type="password" :password-icon="passwordIcon" class="loginpwdBox-box-bar-uinput"></u-input>
			</view>
			<view class="splitline"></view>
			<view class="loginpwdBox-box-bar">
				<text>{{confirmPwd}}</text>
				<u-input placeholder="请再次输入新密码" type="password" :password-icon="passwordIcon" class="loginpwdBox-box-bar-uinputsure"></u-input>
			</view>
		</view>
		<u-button type="primary" class="loginpwdBox-btn-confirm">{{confirmPwd}}</u-button>
	</view>
</template>

<script>
var graceChecker = require("@/graceUI/jsTools/graceChecker.js");
import { mapActions } from "vuex";

export default {
  methods: {
    ...mapActions("user", ["changePassword", "logout"]),
    // 表单提交及验证
    formSubmit: function (e) {
      //定义表单规则
      var rule = [
        {
          name: "old_password",
          checkType: "string",
          checkRule: "8,",
          errorMsg: this.$t("account.tips.password_length", { length: 8 }),
        },
        {
          name: "password",
          checkType: "string",
          checkRule: "8,",
          errorMsg: this.$t("account.tips.password_length", { length: 8 }),
        },
        {
          name: "password_confirmation",
          checkType: "samewith",
          checkRule: "password",
          errorMsg: this.$t("account.tips.password_not_same"),
        },
      ];
      //进行表单检查 e.detail.value 内存放着表单数据
      var formData = e.detail.value;
      console.log(formData);
      var checkRes = graceChecker.check(formData, rule);
      if (checkRes) {
        this.changePassword(formData)
          .then(() => {
            this.makeToast(this.$t("account.tips.forget_success"));
            setTimeout(this.logout, 1000);
          })
          .catch(({ response }) => {
            this.makeToast(response.data.message);
          });
      } else {
        this.makeToast({ title: graceChecker.error, icon: "none" });
      }
    },
  },
};
</script>

<style lang="scss">
	page{
		font-size: 32rpx;
		color: #222;
		background-color: #f5f5f5;
	}
	.loginpwdBox{
		width: 100%;
		height: 306rpx;
		background-color: #fff;
		margin-top: 30rpx;
		.loginpwdBox-box{
			width: 702rpx;
			height: 306rpx;
			margin: 0 auto;
			.loginpwdBox-box-bar{
				display: flex;
				align-items: center;
				.loginpwdBox-box-bar-uinput{
					margin-left: 62rpx;
				}
				.loginpwdBox-box-bar-uinputsure{
					margin-left: 30rpx;
				}
			}
			.splitline{
				height: 2rpx;
				background-color: #f5f5f5;
				margin-top: 20rpx;
				margin-bottom: 20rpx;
			}
		}
		.loginpwdBox-btn-confirm{
			width: 702rpx;
			height: 88rpx;
			margin-top: 38rpx;
			background-color: #2A96EE;
		}
	}
</style>
